<script lang="ts" setup>
import type { XuanXiaoAlbum, XuanXiaoColumn, XuanXiaoConsult, XuanXiaoCourse, XuanXiaoHomeIndex, XuanXiaoNews, XuanXiaoPage, XuanXiaoQuestion, XuanXiaoTeach, XuanXiaoTeacher } from '@/api/designer/model'
import type { Exposed, OpenCallback, OpenData, OpenOpts, SelectedKeyType } from './type'
import { JumpType, JumpTypeMap } from '@/definitions/type'
import { useCheckAll } from '@/hooks/useCheckAll'
import { useInstStore } from '@/stores'
import { warn } from '@/utils/helper'
import { Checkbox, Input, Modal, Radio } from 'ant-design-vue'
import { computed, onMounted, ref, toValue } from 'vue'

type XuanXiaoHomeIndexKeys = keyof Omit<XuanXiaoHomeIndex, 'courseCategorys' | 'courseRecommends'>
defineOptions({
  name: 'JumpLinkModal',
})
const instStore = useInstStore()
const tabOptions = ref<Option<JumpType>[]>([
  { value: JumpType.Column, label: JumpTypeMap.get(JumpType.Column) as string },
  { value: JumpType.Course, label: JumpTypeMap.get(JumpType.Course) as string },
  { value: JumpType.News, label: JumpTypeMap.get(JumpType.News) as string },
  { value: JumpType.Teacher, label: JumpTypeMap.get(JumpType.Teacher) as string },
  { value: JumpType.QA, label: JumpTypeMap.get(JumpType.QA) as string },
  { value: JumpType.Album, label: JumpTypeMap.get(JumpType.Album) as string },
  { value: JumpType.Page, label: JumpTypeMap.get(JumpType.Page) as string },
  { value: JumpType.Consult, label: JumpTypeMap.get(JumpType.Consult) as string },
  { value: JumpType.Teachs, label: JumpTypeMap.get(JumpType.Teachs) as string },
])
const currentTab = ref<JumpType>(tabOptions.value[0].value)
const open = ref(false)
const currentJump = ref<Nullable<OpenData>>()
const currentJumpCallback = ref<Nullable<OpenCallback>>()
const keywords = ref<Record<Exclude<JumpType, JumpType.None>, string>>({
  [JumpType.Column]: '',
  [JumpType.Course]: '',
  [JumpType.News]: '',
  [JumpType.Teacher]: '',
  [JumpType.QA]: '',
  [JumpType.Album]: '',
  [JumpType.Page]: '',
  [JumpType.Consult]: '',
  [JumpType.Teachs]: '',
})
const jumpList = ref<Record<XuanXiaoHomeIndexKeys, any[]>>({
  columns: [],
  courses: [],
  news: [],
  teachers: [],
  questions: [],
  albums: [],
  pages: [],
  consults: [],
  teachs: [],
})
const opts = ref<OpenOpts>({})
const onePageKeys = computed<SelectedKeyType[]>(() => {
  if (opts.value.mode === 'single') {
    return []
  }
  const tabValue = toValue(currentTab)
  switch (tabValue) {
    case JumpType.Course:
      return (jumpList.value.courses as XuanXiaoCourse[]).map(l => l.id)
    case JumpType.Teacher:
      return (jumpList.value.teachers as XuanXiaoTeacher[]).map(l => l.id)
    case JumpType.QA:
      return (jumpList.value.questions as XuanXiaoQuestion[]).map(l => l.id)
    case JumpType.News:
      return (jumpList.value.news as XuanXiaoNews[]).map(l => l.id)
    case JumpType.Teachs:
      return (jumpList.value.teachs as XuanXiaoTeach[]).map(l => l.id)
    case JumpType.Album:
      return (jumpList.value.news as XuanXiaoAlbum[]).map(l => l.id)
    default:
      return []
  }
})
const { selectedKeys, state, handleCheckAllChange, setSelectedKeys, clear } = useCheckAll(onePageKeys)
function isChecked(record: unknown, jumpType: JumpType) {
  switch (jumpType) {
    case JumpType.Course:
      return selectedKeys.value.includes((record as XuanXiaoCourse).id)
    case JumpType.Teacher:
      return selectedKeys.value.includes((record as XuanXiaoTeacher).id)
    case JumpType.QA:
      return selectedKeys.value.includes((record as XuanXiaoQuestion).id)
    case JumpType.News:
      return selectedKeys.value.includes((record as XuanXiaoNews).id)
    case JumpType.Teachs:
      return selectedKeys.value.includes((record as XuanXiaoTeach).id)
    case JumpType.Album:
      return selectedKeys.value.includes((record as XuanXiaoAlbum).id)
    default:
      return false
  }
}
defineExpose<Exposed>({
  async open(_data, _callback, _opts) {
    opts.value = Object.assign({ mode: 'single', selectedKeys: [] }, _opts)
    if (opts.value.mode === 'multiple') {
      setSelectedKeys(opts.value.selectedKeys!)
    }
    currentJump.value = _data
    currentJumpCallback.value = _callback
    if ((currentJump.value.jumpType as unknown as JumpType) !== JumpType.None) {
      currentTab.value = currentJump.value.jumpType as unknown as JumpType
    }
    open.value = true
  },
})
onMounted(async () => {
  await instStore.loadJumpData()
  initJumpList()
})
function initJumpList() {
  const map = new Map<keyof typeof keywords.value, XuanXiaoHomeIndexKeys>([
    [JumpType.Column, 'columns'],
    [JumpType.Course, 'courses'],
    [JumpType.News, 'news'],
    [JumpType.Teacher, 'teachers'],
    [JumpType.QA, 'questions'],
    [JumpType.Album, 'albums'],
    [JumpType.Page, 'pages'],
    [JumpType.Consult, 'consults'],
    [JumpType.Teachs, 'teachs'],
  ])
  for (const [jumpType, dataKey] of map) {
    handleSearch(jumpType, dataKey)
  }
}
function handleCancel() {
  const callback = toValue(currentJumpCallback)
  if (callback) {
    callback({
      applied: false,
      value: null,
    })
  }
  cleanUp()
}
function cleanUp() {
  open.value = false
  currentJump.value = null
  currentJumpCallback.value = null
  opts.value = {}
  clear()
}
function switchTab(tab: Option<JumpType>) {
  if (opts.value.mode === 'multiple')
    return
  if (tab.value === currentTab.value)
    return
  currentTab.value = tab.value
}
function handleOk() {
  const jumpValue = toValue(currentJump)
  const callback = toValue(currentJumpCallback)
  if (!jumpValue || !callback) {
    warn('[JumpLinkModal] jumpValue 或 callback 缺失')
    return handleCancel()
  }
  const jumpType = jumpValue.jumpType as unknown as JumpType
  if (opts.value.mode === 'single') {
    switch (jumpType) {
      case JumpType.Column:
        callback({
          applied: true,
          value: {
            jumpType: jumpValue.jumpType,
            jumpUrl: jumpValue.jumpUrl,
            jumpTitle: jumpValue.jumpTitle,
          },
        })
        break
      case JumpType.Course:
      case JumpType.News:
      case JumpType.Teacher:
      case JumpType.Teachs:
      case JumpType.QA:
      case JumpType.Album:
      case JumpType.Page:
        callback({
          applied: true,
          value: {
            jumpType: jumpValue.jumpType,
            jumpUrl: jumpValue.jumpUrl,
            jumpTitle: jumpValue.jumpTitle,
            jumpValue: jumpValue.jumpValue,
          },
        })
        break
      case JumpType.Consult:
        callback({
          applied: true,
          value: {
            jumpType: jumpValue.jumpType,
            jumpTitle: jumpValue.jumpTitle,
            jumpValue: jumpValue.jumpValue,
            // 这里jumpUrl是特殊处理的
            // 格式：`[method, content].join(',')`
            jumpUrl: jumpValue.jumpUrl,
          },
        })
        break
      default:
        break
    }
  }
  else if (opts.value.mode === 'multiple') {
    switch (jumpType) {
      case JumpType.Course:
        const selectedItems: XuanXiaoCourse[] = []
        selectedKeys.value.forEach((key) => {
          const match = (jumpList.value.courses as XuanXiaoCourse[]).find(l => l.id === key)
          if (match) {
            selectedItems.push(match)
          }
        })
        callback({
          applied: true,
          value: {
            jumpType: jumpValue.jumpType,
          },
          selectedItems,
        })
        break
      case JumpType.Teacher:
        const selectedTeachers: XuanXiaoTeacher[] = []
        selectedKeys.value.forEach((key) => {
          const match = (jumpList.value.teachers as XuanXiaoTeacher[]).find(l => l.id === key)
          if (match) {
            selectedTeachers.push(match)
          }
        })
        callback({
          applied: true,
          value: {
            jumpType: jumpValue.jumpType,
          },
          selectedItems: selectedTeachers,
        })
        break
      case JumpType.QA:
        const selectedQuestions: XuanXiaoQuestion[] = []
        selectedKeys.value.forEach((key) => {
          const match = (jumpList.value.questions as XuanXiaoQuestion[]).find(l => l.id === key)
          if (match) {
            selectedQuestions.push(match)
          }
        })
        callback({
          applied: true,
          value: {
            jumpType: jumpValue.jumpType,
          },
          selectedItems: selectedQuestions,
        })
        break
      case JumpType.News:
        const selectedNews: XuanXiaoNews[] = []
        selectedKeys.value.forEach((key) => {
          const match = (jumpList.value.news as XuanXiaoNews[]).find(l => l.id === key)
          if (match) {
            selectedNews.push(match)
          }
        })
        callback({
          applied: true,
          value: {
            jumpType: jumpValue.jumpType,
          },
          selectedItems: selectedNews,
        })
        break
      case JumpType.Teachs:
        const selectedTeachs: XuanXiaoTeach[] = []
        selectedKeys.value.forEach((key) => {
          const match = (jumpList.value.teachs as XuanXiaoTeach[]).find(l => l.id === key)
          if (match) {
            selectedTeachs.push(match)
          }
        })
        callback({
          applied: true,
          value: {
            jumpType: jumpValue.jumpType,
          },
          selectedItems: selectedTeachs,
        })
        break
      case JumpType.Album:
        const selectedAlbum: XuanXiaoAlbum[] = []
        selectedKeys.value.forEach((key) => {
          const match = (jumpList.value.albums as XuanXiaoAlbum[]).find(l => l.id === key)
          if (match) {
            selectedAlbum.push(match)
          }
        })
        callback({
          applied: true,
          value: {
            jumpType: jumpValue.jumpType,
          },
          selectedItems: selectedAlbum,
        })
        break
      default:
        break
    }
  }
  cleanUp()
}
function handleCheckChange(item: unknown) {
  if (!currentJump.value)
    return
  const tabValue = toValue(currentTab)
  currentJump.value.jumpType = tabValue as any
  if (opts.value.mode === 'single') {
    switch (tabValue) {
      case JumpType.Column:
        currentJump.value.jumpUrl = (item as XuanXiaoColumn).url
        currentJump.value.jumpTitle = (item as XuanXiaoColumn).name
        break
      case JumpType.Course:
        currentJump.value.jumpTitle = (item as XuanXiaoCourse).name
        currentJump.value.jumpUrl = (item as XuanXiaoCourse).url
        currentJump.value.jumpValue = (item as XuanXiaoCourse).id as any
        break
      case JumpType.News:
        currentJump.value.jumpTitle = (item as XuanXiaoNews).title
        currentJump.value.jumpUrl = (item as XuanXiaoNews).url
        currentJump.value.jumpValue = (item as XuanXiaoNews).id as any
        break
      case JumpType.Teacher:
        currentJump.value.jumpTitle = (item as XuanXiaoTeacher).title
        currentJump.value.jumpUrl = (item as XuanXiaoTeacher).url
        currentJump.value.jumpValue = (item as XuanXiaoTeacher).id as any
        break
      case JumpType.QA:
        currentJump.value.jumpTitle = (item as XuanXiaoQuestion).title
        currentJump.value.jumpUrl = (item as XuanXiaoQuestion).url
        currentJump.value.jumpValue = (item as XuanXiaoQuestion).id as any
        break
      case JumpType.Album:
        currentJump.value.jumpTitle = (item as XuanXiaoAlbum).name
        currentJump.value.jumpUrl = (item as XuanXiaoAlbum).url
        currentJump.value.jumpValue = (item as XuanXiaoAlbum).id as any
        break
      case JumpType.Page:
        currentJump.value.jumpTitle = (item as XuanXiaoPage).title
        currentJump.value.jumpUrl = (item as XuanXiaoPage).url
        currentJump.value.jumpValue = (item as XuanXiaoPage).id as any
        break
      case JumpType.Consult:
        currentJump.value.jumpTitle = (item as XuanXiaoConsult).name
        currentJump.value.jumpValue = (item as XuanXiaoConsult).id as any
        // 这里针对咨询类型进行特殊处理
        // 这里将method 和 content存入jumpUrl属性
        // 处理端根据jumpUrl取出这两个属性进行设置跳转逻辑
        currentJump.value.jumpUrl = [(item as XuanXiaoConsult).method, (item as XuanXiaoConsult).content].join(',')
        break
      case JumpType.Teachs:
        currentJump.value.jumpTitle = (item as XuanXiaoTeach).name
        currentJump.value.jumpValue = (item as XuanXiaoTeach).id as any
        break
      default:
        break
    }
  }
  else if (opts.value.mode === 'multiple') {
    switch (tabValue) {
      case JumpType.Course:
        const _item = item as XuanXiaoCourse
        const nextState = !isChecked(_item, tabValue)
        if (nextState) {
          setSelectedKeys((mutatorRef) => {
            mutatorRef.value.push(_item.id)
          })
        }
        else {
          setSelectedKeys(selectedKeys.value.filter(key => key !== _item.id))
        }
        break
      case JumpType.Teacher:
        const _itemTeacher = item as XuanXiaoTeacher
        const nextStateTeacher = !isChecked(_itemTeacher, tabValue)
        if (nextStateTeacher) {
          setSelectedKeys((mutatorRef) => {
            mutatorRef.value.push(_itemTeacher.id)
          })
        }
        else {
          setSelectedKeys(selectedKeys.value.filter(key => key !== _itemTeacher.id))
        }
        break
      case JumpType.QA:
        const _itemQuestion = item as XuanXiaoQuestion
        const nextStateQuestion = !isChecked(_itemQuestion, tabValue)
        if (nextStateQuestion) {
          setSelectedKeys((mutatorRef) => {
            mutatorRef.value.push(_itemQuestion.id)
          })
        }
        else {
          setSelectedKeys(selectedKeys.value.filter(key => key !== _itemQuestion.id))
        }
        break
      case JumpType.News:
        const _itemNews = item as XuanXiaoNews
        const nextStateNews = !isChecked(_itemNews, tabValue)
        if (nextStateNews) {
          setSelectedKeys((mutatorRef) => {
            mutatorRef.value.push(_itemNews.id)
          })
        }
        else {
          setSelectedKeys(selectedKeys.value.filter(key => key !== _itemNews.id))
        }
        break
      case JumpType.Teachs:
        const _itemTeachs = item as XuanXiaoTeach
        const nextStateTeachs = !isChecked(_itemTeachs, tabValue)
        if (nextStateTeachs) {
          setSelectedKeys((mutatorRef) => {
            mutatorRef.value.push(_itemTeachs.id)
          })
        }
        else {
          setSelectedKeys(selectedKeys.value.filter(key => key !== _itemTeachs.id))
        }
        break
      case JumpType.Album:
        const _itemAlbum = item as XuanXiaoAlbum
        const nextStateAlbum = !isChecked(_itemAlbum, tabValue)
        if (nextStateAlbum) {
          setSelectedKeys((mutatorRef) => {
            mutatorRef.value.push(_itemAlbum.id)
          })
        }
        else {
          setSelectedKeys(selectedKeys.value.filter(key => key !== _itemAlbum.id))
        }
        break
      default:
        break
    }
  }
}
function handleSearch(jumpType: keyof typeof keywords.value, dataKey: XuanXiaoHomeIndexKeys) {
  if (!instStore.jumpData)
    return
  const keyword = keywords.value[jumpType]
  const filterKey = getFilterKey(jumpType)
  jumpList.value[dataKey] = instStore.jumpData[dataKey]!.filter((l) => {
    // @ts-ignore
    const text: string = l[filterKey] ?? ''
    return ~text.search(keyword)
  })
}
function getFilterKey(jumpType: JumpType) {
  let filterKey = ''
  if (jumpType === JumpType.Column) {
    filterKey = 'name'
  }
  else if (jumpType === JumpType.Course) {
    filterKey = 'name'
  }
  else if (jumpType === JumpType.News) {
    filterKey = 'title'
  }
  else if (jumpType === JumpType.Teacher) {
    filterKey = 'title'
  }
  else if (jumpType === JumpType.QA) {
    filterKey = 'title'
  }
  else if (jumpType === JumpType.Album) {
    filterKey = 'name'
  }
  else if (jumpType === JumpType.Page) {
    filterKey = 'title'
  }
  else if (jumpType === JumpType.Consult) {
    filterKey = 'name'
  }
  else if (jumpType === JumpType.Teachs) {
    filterKey = 'name'
  }
  return filterKey
}
</script>

<template>
  <Modal v-model:open="open" title="选择" :width="1075" @cancel="handleCancel" @ok="handleOk">
    <div class="flex flex-row box-border">
      <!-- 侧边栏 -->
      <div class="flex-none px-4 py-6 aside-wrap">
        <div
          v-for="item of tabOptions" :key="item.value"
          class="flex flex-row justify-center items-center rounded cursor-pointer text-sm font-500 aside-tab"
          :class="item.value === currentTab ? 'active-tab' : ''" @click="switchTab(item)"
        >
          {{ item.label }}
        </div>
      </div>
      <!-- 右侧 -->
      <div class="flex-1 w-0 box-border pl-4 pt-5">
        <!-- 栏目 -->
        <div v-if="currentTab === JumpType.Column">
          <div class="flex flex-row items-center justify-between">
            <div>共{{ instStore.jumpData?.columns?.length }}个栏目</div>
            <Input
              v-model:value="keywords[JumpType.Column]" placeholder="输入要搜索的内容" style="width: 240px;"
              @press-enter="handleSearch(JumpType.Column, 'columns')"
            >
              <template #suffix>
                <i
                  class="i-ant-design:search-outlined w-4 h-4 block cursor-pointer"
                  @click="handleSearch(JumpType.Column, 'columns')"
                />
              </template>
            </Input>
          </div>
          <div class="mt-5">
            <div class="list-case list-case-header">
              栏目
            </div>
            <ul v-if="jumpList.columns" class="list-none m-0 max-h-[320px] overflow-y-auto">
              <li v-for="item in jumpList.columns" :key="item.url" class="list-case" @click="handleCheckChange(item)">
                <Radio :checked="item.url === currentJump?.jumpUrl">
                  {{ item.name }}
                </Radio>
              </li>
            </ul>
          </div>
        </div>
        <!-- 课程 -->
        <div v-else-if="currentTab === JumpType.Course">
          <div class="flex flex-row items-center justify-between">
            <div>共{{ instStore.jumpData?.courses?.length }}个课程</div>
            <Input
              v-model:value="keywords[JumpType.Course]" placeholder="输入要搜索的内容" style="width: 240px;"
              @press-enter="handleSearch(JumpType.Course, 'courses')"
            >
              <template #suffix>
                <i
                  class="i-ant-design:search-outlined w-4 h-4 block cursor-pointer"
                  @click="handleSearch(JumpType.Course, 'courses')"
                />
              </template>
            </Input>
          </div>
          <div class="mt-5">
            <div v-if="opts.mode === 'single'" class="list-case list-case-header">
              课程
            </div>
            <div v-else-if="opts.mode === 'multiple'" class="list-case list-case-header">
              <Checkbox
                v-model:checked="state.checkAll" :indeterminate="state.indeterminate"
                class="ant-checkbox-middle" @change="handleCheckAllChange"
              />
              <span class="ml-3">课程</span>
            </div>
            <ul v-if="jumpList.courses" class="list-none m-0 max-h-[320px] overflow-y-auto">
              <li v-for="item in jumpList.courses" :key="item.id" class="list-case">
                <Radio
                  v-if="opts.mode === 'single'" :checked="item.id === currentJump?.jumpValue"
                  @click.stop="handleCheckChange(item)"
                >
                  <div class="flex flex-row items-center gap-2">
                    <img :src="item.pic" :width="64" :height="48" class="block flex-none w-64px h-48px object-fill">
                    <div class="flex flex-col gap-1 flex-1">
                      <div class="text-main-app text-sm">
                        {{ item.name }}
                      </div>
                      <div class="text-second-app text-sm truncate">
                        {{ item.desc }}
                      </div>
                    </div>
                  </div>
                </Radio>
                <Checkbox
                  v-else-if="opts.mode === 'multiple'" :checked="isChecked(item, JumpType.Course)"
                  @click.stop="handleCheckChange(item)"
                >
                  <div class="flex flex-row items-center gap-2">
                    <img :src="item.pic" :width="64" :height="48" class="block flex-none w-64px h-48px object-fill">
                    <div class="flex flex-col gap-1 flex-1">
                      <div class="text-main-app text-sm">
                        {{ item.name }}
                      </div>
                      <div class="text-second-app text-sm truncate">
                        {{ item.desc }}
                      </div>
                    </div>
                  </div>
                </Checkbox>
              </li>
            </ul>
          </div>
        </div>
        <!-- 资讯 -->
        <div v-else-if="currentTab === JumpType.News">
          <div class="flex flex-row items-center justify-between">
            <div>共{{ instStore.jumpData?.news?.length }}个资讯</div>
            <Input
              v-model:value="keywords[JumpType.News]" placeholder="输入要搜索的内容" style="width: 240px;"
              @press-enter="handleSearch(JumpType.News, 'news')"
            >
              <template #suffix>
                <i
                  class="i-ant-design:search-outlined w-4 h-4 block cursor-pointer"
                  @click="handleSearch(JumpType.News, 'news')"
                />
              </template>
            </Input>
          </div>
          <div class="mt-5">
            <div v-if="opts.mode === 'single'" class="list-case list-case-header">
              资讯
            </div>
            <div v-else-if="opts.mode === 'multiple'" class="list-case list-case-header">
              <Checkbox
                v-model:checked="state.checkAll" :indeterminate="state.indeterminate"
                class="ant-checkbox-middle" @change="handleCheckAllChange"
              />
              <span class="ml-3">资讯</span>
            </div>
            <ul v-if="jumpList.news" class="list-none m-0 max-h-[320px] overflow-y-auto">
              <li v-for="item in jumpList.news" :key="item.id" class="list-case">
                <Radio
                  v-if="opts.mode === 'single'" :checked="item.id === currentJump?.jumpValue"
                  @click.stop="handleCheckChange(item)"
                >
                  <div class="flex flex-row items-center gap-2">
                    <img :src="item.pic" :width="64" :height="48" class="block flex-none w-64px h-48px object-fill">
                    <div class="flex flex-col gap-1 flex-1">
                      <div class="text-main-app text-sm">
                        {{ item.title }}
                      </div>
                      <div class="text-second-app text-sm truncate">
                        {{ item.desc }}
                      </div>
                    </div>
                  </div>
                </Radio>
                <Checkbox
                  v-else-if="opts.mode === 'multiple'" :checked="isChecked(item, JumpType.News)"
                  @click.stop="handleCheckChange(item)"
                >
                  <div class="flex flex-row items-center gap-2">
                    <img :src="item.pic" :width="64" :height="48" class="block flex-none w-64px h-48px object-fill">
                    <div class="flex flex-col gap-1 flex-1">
                      <div class="text-main-app text-sm">
                        {{ item.title }}
                      </div>
                      <div class="text-second-app text-sm truncate">
                        {{ item.desc }}
                      </div>
                    </div>
                  </div>
                </Checkbox>
              </li>
            </ul>
          </div>
        </div>
        <!-- 师资 -->
        <div v-else-if="currentTab === JumpType.Teacher">
          <div class="flex flex-row items-center justify-between">
            <div>共{{ instStore.jumpData?.teachers?.length }}个师资</div>
            <Input
              v-model:value="keywords[JumpType.Teacher]" placeholder="输入要搜索的内容" style="width: 240px;"
              @press-enter="handleSearch(JumpType.Teacher, 'teachers')"
            >
              <template #suffix>
                <i
                  class="i-ant-design:search-outlined w-4 h-4 block cursor-pointer"
                  @click="handleSearch(JumpType.Teacher, 'teachers')"
                />
              </template>
            </Input>
          </div>
          <div class="mt-5">
            <div v-if="opts.mode === 'single'" class="list-case list-case-header">
              师资
            </div>
            <div v-else-if="opts.mode === 'multiple'" class="list-case list-case-header">
              <Checkbox
                v-model:checked="state.checkAll" :indeterminate="state.indeterminate"
                class="ant-checkbox-middle" @change="handleCheckAllChange"
              />
              <span class="ml-3">师资</span>
            </div>
            <ul v-if="jumpList.teachers" class="list-none m-0 max-h-[320px] overflow-y-auto">
              <li v-for="item in jumpList.teachers" :key="item.id" class="list-case">
                <Radio
                  v-if="opts.mode === 'single'" :checked="item.id === currentJump?.jumpValue"
                  @click.stop="handleCheckChange(item)"
                >
                  <div class="flex flex-row items-center gap-2">
                    <img :src="item.pic" :width="64" :height="48" class="block flex-none w-64px h-48px object-fill">
                    <div class="flex flex-col gap-1 flex-1">
                      <div class="text-main-app text-sm">
                        {{ item.title }}
                      </div>
                      <div class="text-second-app text-sm truncate">
                        {{ item.time }}
                      </div>
                    </div>
                  </div>
                </Radio>
                <Checkbox
                  v-else-if="opts.mode === 'multiple'" :checked="isChecked(item, JumpType.Teacher)"
                  @click.stop="handleCheckChange(item)"
                >
                  <div class="flex flex-row items-center gap-2">
                    <img :src="item.pic" :width="64" :height="48" class="block flex-none w-64px h-48px object-fill">
                    <div class="flex flex-col gap-1 flex-1">
                      <div class="text-main-app text-sm">
                        {{ item.title }}
                      </div>
                      <div class="text-second-app text-sm truncate">
                        {{ item.time }}
                      </div>
                    </div>
                  </div>
                </Checkbox>
              </li>
            </ul>
          </div>
        </div>
        <!-- 问答 -->
        <div v-else-if="currentTab === JumpType.QA">
          <div class="flex flex-row items-center justify-between">
            <div>共{{ instStore.jumpData?.questions?.length }}个问答</div>
            <Input
              v-model:value="keywords[JumpType.QA]" placeholder="输入要搜索的内容" style="width: 240px;"
              @press-enter="handleSearch(JumpType.QA, 'questions')"
            >
              <template #suffix>
                <i
                  class="i-ant-design:search-outlined w-4 h-4 block cursor-pointer"
                  @click="handleSearch(JumpType.QA, 'questions')"
                />
              </template>
            </Input>
          </div>
          <div class="mt-5">
            <div v-if="opts.mode === 'single'" class="list-case list-case-header">
              问答
            </div>
            <div v-else-if="opts.mode === 'multiple'" class="list-case list-case-header">
              <Checkbox
                v-model:checked="state.checkAll" :indeterminate="state.indeterminate"
                class="ant-checkbox-middle" @change="handleCheckAllChange"
              />
              <span class="ml-3">问答</span>
            </div>
            <ul v-if="jumpList.questions" class="list-none m-0 max-h-[320px] overflow-y-auto">
              <li v-for="item in jumpList.questions" :key="item.id" class="list-case">
                <Radio
                  v-if="opts.mode === 'single'" :checked="item.id === currentJump?.jumpValue"
                  @click.stop="handleCheckChange(item)"
                >
                  <div class="flex flex-row items-center gap-2">
                    <img :src="item.pic" :width="64" :height="48" class="block flex-none w-64px h-48px object-fill">
                    <div class="flex flex-col gap-1 flex-1">
                      <div class="text-main-app text-sm">
                        {{ item.title }}
                      </div>
                      <div class="text-second-app text-sm truncate">
                        {{ item.category }}
                      </div>
                    </div>
                  </div>
                </Radio>
                <Checkbox
                  v-else-if="opts.mode === 'multiple'" :checked="isChecked(item, JumpType.QA)"
                  @click.stop="handleCheckChange(item)"
                >
                  <div class="flex flex-row items-center gap-2">
                    <img :src="item.pic" :width="64" :height="48" class="block flex-none w-64px h-48px object-fill">
                    <div class="flex flex-col gap-1 flex-1">
                      <div class="text-main-app text-sm">
                        {{ item.title }}
                      </div>
                      <div class="text-second-app text-sm truncate">
                        {{ item.category }}
                      </div>
                    </div>
                  </div>
                </Checkbox>
              </li>
            </ul>
          </div>
        </div>
        <!-- 相册 -->
        <div v-else-if="currentTab === JumpType.Album">
          <div class="flex flex-row items-center justify-between">
            <div>共{{ instStore.jumpData?.albums?.length }}个相册</div>
            <Input
              v-model:value="keywords[JumpType.Album]" placeholder="输入要搜索的内容" style="width: 240px;"
              @press-enter="handleSearch(JumpType.Album, 'albums')"
            >
              <template #suffix>
                <i
                  class="i-ant-design:search-outlined w-4 h-4 block cursor-pointer"
                  @click="handleSearch(JumpType.Album, 'albums')"
                />
              </template>
            </Input>
          </div>
          <div class="mt-5">
            <div v-if="opts.mode === 'single'" class="list-case list-case-header">
              相册
            </div>
            <div v-else-if="opts.mode === 'multiple'" class="list-case list-case-header">
              <Checkbox
                v-model:checked="state.checkAll" :indeterminate="state.indeterminate"
                class="ant-checkbox-middle" @change="handleCheckAllChange"
              />
              <span class="ml-3">相册</span>
            </div>
            <ul v-if="jumpList.albums" class="list-none m-0 max-h-[320px] overflow-y-auto">
              <li v-for="item in jumpList.albums" :key="item.id" class="list-case">
                <Radio
                  v-if="opts.mode === 'single'" :checked="item.id === currentJump?.jumpValue"
                  @click.stop="handleCheckChange(item)"
                >
                  <div class="flex flex-row items-center gap-2">
                    <img :src="item.pic" :width="64" :height="48" class="block flex-none w-64px h-48px object-fill">
                    <div class="flex flex-col gap-1 flex-1">
                      <div class="text-main-app text-sm">
                        {{ item.name }}
                      </div>
                      <div class="text-second-app text-sm truncate">
                        共{{ item.count }}张照片
                      </div>
                    </div>
                  </div>
                </Radio>
                <Checkbox
                  v-else-if="opts.mode === 'multiple'" :checked="isChecked(item, JumpType.Album)"
                  @click.stop="handleCheckChange(item)"
                >
                  <div class="flex flex-row items-center gap-2">
                    <img :src="item.pic" :width="64" :height="48" class="block flex-none w-64px h-48px object-fill">
                    <div class="flex flex-col gap-1 flex-1">
                      <div class="text-main-app text-sm">
                        {{ item.name }}
                      </div>
                      <div class="text-second-app text-sm truncate">
                        共{{ item.count }}张照片
                      </div>
                    </div>
                  </div>
                </Checkbox>
              </li>
            </ul>
          </div>
        </div>
        <!-- 页面 -->
        <div v-else-if="currentTab === JumpType.Page">
          <div class="flex flex-row items-center justify-between">
            <div>共{{ instStore.jumpData?.pages?.length }}个页面</div>
            <Input
              v-model:value="keywords[JumpType.Page]" placeholder="输入要搜索的内容" style="width: 240px;"
              @press-enter="handleSearch(JumpType.Page, 'pages')"
            >
              <template #suffix>
                <i
                  class="i-ant-design:search-outlined w-4 h-4 block cursor-pointer"
                  @click="handleSearch(JumpType.Page, 'pages')"
                />
              </template>
            </Input>
          </div>
          <div class="mt-5">
            <div class="list-case list-case-header">
              页面
            </div>
            <ul v-if="jumpList.pages" class="list-none m-0 max-h-[320px] overflow-y-auto">
              <li v-for="item in jumpList.pages" :key="item.id" class="list-case" @click="handleCheckChange(item)">
                <Radio :checked="item.id === currentJump?.jumpValue">
                  {{ item.title }}
                </Radio>
              </li>
            </ul>
          </div>
        </div>
        <!-- 咨询 -->
        <div v-else-if="currentTab === JumpType.Consult">
          <div class="flex flex-row items-center justify-between">
            <div>共{{ instStore.jumpData?.consults?.length }}个咨询方式</div>
            <Input
              v-model:value="keywords[JumpType.Consult]" placeholder="输入要搜索的内容" style="width: 240px;"
              @press-enter="handleSearch(JumpType.Consult, 'consults')"
            >
              <template #suffix>
                <i
                  class="i-ant-design:search-outlined w-4 h-4 block cursor-pointer"
                  @click="handleSearch(JumpType.Consult, 'consults')"
                />
              </template>
            </Input>
          </div>
          <div class="mt-5">
            <div class="list-case list-case-header">
              咨询方式
            </div>
            <ul v-if="jumpList.consults" class="list-none m-0 max-h-[320px] overflow-y-auto">
              <li v-for="item in jumpList.consults" :key="item.id" class="list-case" @click="handleCheckChange(item)">
                <Radio :checked="item.id === currentJump?.jumpValue">
                  {{ item.name }}{{ item.content ? `：${item.content}` : "" }}
                </Radio>
              </li>
            </ul>
          </div>
        </div>
        <!-- 校区 -->
        <div v-else-if="currentTab === JumpType.Teachs">
          <div class="flex flex-row items-center justify-between">
            <div>共{{ instStore.jumpData?.teachs?.length }}个校区</div>
            <Input
              v-model:value="keywords[JumpType.Teachs]" placeholder="输入要搜索的内容" style="width: 240px;"
              @press-enter="handleSearch(JumpType.Teachs, 'teachs')"
            >
              <template #suffix>
                <i
                  class="i-ant-design:search-outlined w-4 h-4 block cursor-pointer"
                  @click="handleSearch(JumpType.Teachs, 'teachs')"
                />
              </template>
            </Input>
          </div>
          <div class="mt-5">
            <div v-if="opts.mode === 'single'" class="list-case list-case-header">
              校区
            </div>
            <div v-else-if="opts.mode === 'multiple'" class="list-case list-case-header">
              <Checkbox
                v-model:checked="state.checkAll" :indeterminate="state.indeterminate"
                class="ant-checkbox-middle" @change="handleCheckAllChange"
              />
              <span class="ml-3">校区</span>
            </div>
            <ul v-if="jumpList.teachs" class="list-none m-0 max-h-[320px] overflow-y-auto">
              <li v-for="item in jumpList.teachs" :key="item.id" class="list-case">
                <Radio
                  v-if="opts.mode === 'single'" :checked="item.id === currentJump?.jumpValue"
                  @click.stop="handleCheckChange(item)"
                >
                  <div class="flex flex-row items-center gap-2">
                    <div class="flex flex-col gap-1 flex-1">
                      <div class="text-main-app text-sm">
                        {{ item.areaName }}
                      </div>
                      <div class="text-second-app text-sm truncate">
                        {{ item.address }}
                      </div>
                    </div>
                  </div>
                </Radio>
                <Checkbox
                  v-else-if="opts.mode === 'multiple'" :checked="isChecked(item, JumpType.Teachs)"
                  @click.stop="handleCheckChange(item)"
                >
                  <div class="flex flex-row items-center gap-2">
                    <div class="flex flex-col gap-1 flex-1">
                      <div class="text-main-app text-sm">
                        {{ item.name }}
                      </div>
                      <div class="text-second-app text-sm truncate">
                        {{ item.address }}
                      </div>
                    </div>
                  </div>
                </Checkbox>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </Modal>
</template>

<style lang="less" scoped>
.aside-wrap {
  width: 152px;
  border-right: 1px solid #EEEEEE;
}

.aside-tab {
  color: var(--app-text-color-main);
  width: 120px;
  height: 40px;

  &:hover,
  &.active-tab {
    color: var(--app-color-primary);
    background-color: rgba(25, 100, 254, 0.1);
  }
}

.list-case {
  border-bottom: 1px solid #EEEEEE;
  @apply list-none m-0 bg-white flex flex-row items-center cursor-pointer px-4 py-3 text-sm font-normal;

  &.list-case-header {
    background: #F6F9FF;
    @apply font-700;
  }

  &:not(.list-case-header):hover,
  &.active-list-case {
    background: #F6F9FF;
    color: var(--app-color-primary);
  }
}
</style>
